<template>
	<view>
		<view style="position: fixed;width: 686rpx;z-index: 10;margin-left: 32rpx;">
		<u-search placeholder="搜索内容" v-model="keyword" :show-action="true" :action-text="'取消'" :height="68"></u-search>
		</view>
		<view style="height: 50rpx;"></view>
		<scroll-view scroll-y="true" :style="{'height':(clientHeight-50)+'px'}" class="scroll-frame">
			<view class="frame-item" v-for="(item,index) in photoList" :key="index">
				<view class="title">{{item.time}}</view>
				<view class="item-list">
					<view v-for="(items,indexs) in item.list" :key="indexs" @click="previewImages(indexs,item.list)">
					<image class="item-img" v-if="isImgOfVideo(items.url) == 'image'" :src="items.url" > </image>
					<view v-if="isImgOfVideo(items.url) == 'video'">
					<view class="item-img" style="position: absolute;background-color: rgba(0, 0, 0, 0.28);z-index: 10;display: flex;align-items: flex-end;">
						<image src="/static/set/video-white.png" style="width: 35rpx;height: 24rpx;margin-left: 12rpx;margin-bottom: 9rpx;"></image>
						<view style="color: #fff;font-weight: 400;font-size: 24rpx;margin-left: 13rpx;margin-bottom: 7rpx;">00:20</view>
					</view>
					<video class="item-img" :show-center-play-btn="false" :controls="false" id="videoId"  :src="items.url" ></video>
					
					</view>
					</view>
					<!-- <video class="item-img" v-if="isImgOfVideo(items) == 'video'" :src="items" v-for="(items,indexs) in item.list" :key="indexs" ><video> -->
				</view>
			</view>
		</scroll-view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	// import peopleAddPopVue from '../../components/peopleAddPop/peopleAddPop.vue'
	export default {
		data() {
			return {
				keyword:'',
				// 图片/视频数据集
				photoList:[
					{
						time:'2024年5月',
						list:[
							{url:'https://cdn.uviewui.com/uview/album/1.jpg',type:'jpg'},
							{url:'https://cdn.uviewui.com/uview/album/2.jpg',type:'jpg'},
							{url:'https://cdn.uviewui.com/uview/album/3.jpg',type:'jpg'},
							{url:'https://luosai2.oss-cn-guangzhou.aliyuncs.com/Upload/Video/2024/0815/202408151635223127.mp4',type:'mp4'},
							{url:'https://cdn.uviewui.com/uview/album/4.jpg',type:'jpg'},
							{url:'https://cdn.uviewui.com/uview/album/5.jpg',type:'jpg'},
							{url:'https://cdn.uviewui.com/uview/album/6.jpg',type:'jpg'},
							{url:'https://cdn.uviewui.com/uview/album/7.jpg',type:'jpg'},
						]
					}
				],
				id:1
			}
		},
		components:{
			
		},
		methods: {
			// 图片点击预览轮播
			previewImages(index,item){
				// 当为音频形式的时，点击进行音频播放，不处理
				// if (this.list[index].type !== "mp4") {
					// this.previeShow = false;
					var stateObj = {};
					let that = this;
					let onjs = JSON.stringify(item)
					uni.navigateTo({
						url: '/pages2/pages/kxj-previewImage/kxj-previewImage?onjs='+onjs+'&index='+index+'&id='+this.id,
						events: {
							// 监听子组件传过来的值，这儿为了实现联动效果，
							// 即：预览翻到某一图片/视频，轮播图同样滚动到相关的地方
							changePreviewIndex(index){
								that.$refs.myswiper.index = index;
							},
						}
					});
				// }
			},

		}
	}
</script>

<style lang="less">
	

	.scroll-frame{
		
		margin-top: 10rpx;
		padding: 47rpx 24rpx;
		.frame-item{
			margin-bottom: 63rpx;
			.title{
				margin-left: 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3B3B3B;
				margin-bottom: 24rpx;
			}
			.item-list{
				display: flex;
				flex-wrap: wrap;
			}
			.item-img{
				margin-top: 8rpx;
				margin-left: 8rpx;
				width: 166rpx;
				height: 166rpx;
				// background: #BEBEBE;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}
	}
</style>
